<template>
	<view class="rf-house-list" style="background-color: white;">
	   <view class="v-housingResource-list" v-if="list.length > 0">
		<navigator :url="'/pages/sale/detail?id=' + item.id" class="item" v-for="(item, index) in list" :key="index" hover-class="none">
			
			
					<view  class="item">
					     <view  class="item-l">
					          <view  class="item-l-image">
					              <view   class="image-wrap cms-image" >
								  <image :src="item.image" class="default-image" mode="aspectFill"></image>
							      </view>
					          </view>
						  </view>
					
					    <view  class="item-r">
						     <view  class="item-r-title">{{ item.title }}</view>
						    <view  class="item-r-parameter">
							   <view  class="item-r-parameter-door">{{ item.room }}室{{ item.hall }}厅{{ item.toilet }}卫</view>
							   <view  class="item-r-parameter-vertical">|</view>
						       <view  class="item-r-parameter-mj" v-if="item.houseearm">{{ item.houseearm }}㎡</view>
							   <view  class="item-r-parameter-vertical" v-if="item.orientations">|</view>
							   <view  class="item-r-parameter-mj" >{{ item.orientations }}</view>
							   <view  class="item-r-parameter-vertical">|</view>
							   <view  class="item-r-parameter-name">{{ item.housename }}</view>
						    </view>
					        <view  class="item-r-price">
						        <view  class="total-price" >{{ item.price }}<text v-if="item.price>0" class="unit">万</text></view>
						        <!--<view  class="unit-price">{{ item.danjia }}元/㎡</view>-->
					        </view>
					        <view  class="tag-view">
						       <text  class="cms-tag tag"  :style="{borderColor: themeColor.color, color: themeColor.color}" >{{ item.catname }}</text>
						       <text  class="cms-tag tag">{{ item.areaname }}</text><!---->
						     
					        </view>
					    </view>
					</view>
			
			
		</navigator>
	    </view>
	</view>
</template>

<script>
export default {
	name: 'saleList',
	props: {
		list: {
			type: Array,
			default: function(e) {
				return [];
			}
		}
	},
	filters: {
		timeFormat(val){
			if(val && val.length > 10){
				val = val.substr(0,10)
			}
			return val;
		}
	}
};

</script>

<style lang="scss">
/*文章列表*/
.v-housingResource-list {
	margin-top: 2rpx;
	//推荐房源列表
	.first-padding .item:first-child {
	 padding-top:0
	}
	 .item {
	 display:-webkit-box;
	 display:-webkit-flex;
	 display:flex;
	 padding:10px;
	 position:relative
	}
	.item::after {
	 position:absolute;
	 content:"";
	 box-sizing:border-box;
	 pointer-events:none;
	 right:0;
	 left:0;
	 -webkit-transform:scaleY(.5);
	 transform:scaleY(.5);
	 border-bottom:1px solid #f5f5f5;
	 bottom:0
	}
	@media (-webkit-min-device-pixel-radio:3),(min-device-pixel-radio:3) {
	  .item::after {
	  -webkit-transform:scaleY(.33333);
	  transform:scaleY(.33333)
	 }
	}
	@media (-webkit-min-device-pixel-radio:2),(min-device-pixel-radio:2) {
	 .item::after {
	  -webkit-transform:scaleY(.5);
	  transform:scaleY(.5)
	 }
	}
	 .item:last-child::after {
	 border-bottom:0
	}
	 .item .item-l {
	 padding-right:12px
	}
	 .item .item-l .item-l-image {
	 height:86px;
	 width:124px;
	 position:relative
	}
	 .item .item-l .item-l-image .icon-tips {
	 position:absolute;
	 bottom:4px;
	 left:0;
	 height:20px;
	 width:100%;
	 display:-webkit-box;
	 display:-webkit-flex;
	 display:flex;
	 -webkit-box-align:center;
	 -webkit-align-items:center;
	 align-items:center;
	 z-index:2
	}
	 .item .item-l .item-l-image .icon-tips .cms-svg-icon {
	 margin-left:4px
	}
	.item .item-l .item-l-image .icon-top {
	 width:32px;
	 height:17px;
	 position:absolute;
	 top:0;
	 left:-2px;
	 display:-webkit-box;
	 display:-webkit-flex;
	 display:flex;
	 z-index:3
	}
	 .item .item-l .item-l-image .item-recommend {
	 position:absolute;
	 z-index:2;
	 right:0;
	 top:0;
	 display:-webkit-box;
	 display:-webkit-flex;
	 display:flex;
	 -webkit-box-align:center;
	 -webkit-align-items:center;
	 align-items:center;
	 background:rgba(40,40,40,.4);
	 border-radius:0 4px 0 4px
	}
	 .item .item-l .item-l-image .item-recommend .item-recommend-l {
	 position:absolute;
	 z-index:1;
	 right:0;
	 top:0;
	 width:30px;
	 height:30px;
	 -webkit-transform:rotate(90deg);
	 transform:rotate(90deg)
	}
	.item .item-l .item-l-image .item-recommend .item-recommend-no {
	 font-size:12px;
	 color:#fff;
	 padding:3px 5px
	}
	 .item .item-l .item-l-image .item-recommend .item-recommend-no-l {
	 padding-right:25px
	}
	 .item .item-r {
	 width:50%;
	 -webkit-box-flex:2;
	 -webkit-flex-grow:2;
	 flex-grow:2;
	 display:-webkit-box;
	 display:-webkit-flex;
	 display:flex;
	 -webkit-box-orient:vertical;
	 -webkit-box-direction:normal;
	 -webkit-flex-direction:column;
	 flex-direction:column;
	 -webkit-box-pack:justify;
	 -webkit-justify-content:space-between;
	 justify-content:space-between
	}
 .item .item-r .item-r-title {
	 font-size:16px;
	 font-weight:600;
	 color:#000;
	 line-height:24px;
	 max-height:48px;
	 display:-webkit-box;
	 overflow:hidden;
	 word-break:break-all;
	 text-overflow:ellipsis;
	 -webkit-line-clamp:1;
	 -webkit-box-orient:vertical
	}
	 .item .item-r .item-r-title.title-red {
	 color:#d22
	}
	 .item-r-parameter {
	 display:-webkit-box;
	 display:-webkit-flex;
	 display:flex;
	 -webkit-box-align:center;
	 -webkit-align-items:center;
	 align-items:center;
	 color:#333;
	 font-size:12px;
	 font-weight:400;
	 height:11px;
	 padding:1px 0;
	 margin-top:5px
	}
 .item .item-r .item-r-parameter .item-r-parameter-name {
		font-size:12px;
	 max-width:100%;
	 line-height:24px;
	 max-height:24px;
	 display:-webkit-box;
	 overflow:hidden;
	 word-break:break-all;
	 text-overflow:ellipsis;
	 -webkit-line-clamp:1;
	 -webkit-box-orient:vertical
	}
	.item-r-parameter-door {
	 white-space:nowrap;
	 	 font-size:12px;
	 -webkit-flex-shrink:0;
	 flex-shrink:0
	}
 .item .item-r .item-r-parameter .item-r-parameter-mj {
	 -webkit-flex-shrink:0;
	 font-size:12px;
	 flex-shrink:0
	 
	}
	 .item .item-r .item-r-parameter .item-r-parameter-vertical {
	 color:#dde3ef;
	 font-size:12px;
	 margin:0 5px
	}
	 .item .item-r .tag-view {
	 height:21px;
	 font-size:12px;
	 display:-webkit-box;
	 display:-webkit-flex;
	 display:flex;
	 -webkit-box-align:center;
	 -webkit-align-items:center;
	 align-items:center;
	 overflow:hidden;
	 margin-top:4px
	}
	
	 .item .item-r .item-r-price {
	 display:-webkit-box;
	 display:-webkit-flex;
	 display:flex;
	 -webkit-box-align:baseline;
	 -webkit-align-items:baseline;
	 align-items:baseline;
	 -webkit-flex-wrap:wrap;
	 flex-wrap:wrap;
	 margin-top:4px;
	 font-size:12px;
	 color:#999
	}
	 .item .item-r .item-r-price .total-price {
	 color:#d22;
	 font-size:16px;
	 font-weight:700
	}
	 .item .item-r .item-r-price .total-price .unit {
	 font-size:12px;
	 font-weight:400;
	 margin-left:2px
	}
	 .item .item-r .item-r-price .unit-price {
		font-size:12px;
	 margin-left:10px;
	 margin-right:10px
	}
	.image-wrap {
	  display: inline-block;
	  height: 96px;
	  width: 124px;
	  border-radius: 4px;
	  overflow: hidden;
	
	  z-index: 1;
	}
	.cms-tag {
	    height: 18px;
	    font-size: 12px;
	    box-sizing: border-box;
	    line-height: 16px;
	    border: 1px solid #eee;
	    color: #999;
	    padding: 0 3px;
	    border-radius: 2px;
	    margin-right: 5px;
	    display: inline-block;
	    vertical-align: middle;
	    white-space: nowrap;
	}
	.detail-container-view {
	    margin-top: 12px;
	    background: #fff;
	}
	 .padding-left-right {
	    padding: 0 15px;
	}
	.title {
	    display: -webkit-box;
	    display: -webkit-flex;
	    display: flex;
	    height: 44px;
	    -webkit-box-align: center;
	    -webkit-align-items: center;
	    align-items: center;
	    -webkit-box-pack: justify;
	    -webkit-justify-content: space-between;
	    justify-content: space-between;
	}
	.title .title-left {
	  display: -webkit-box;
	  display: -webkit-flex;
	  display: flex;
	  -webkit-box-align: center;
	  -webkit-align-items: center;
	  align-items: center;
	}
	.title .title-left .left-name {
	  font-size: 18px;
	  font-weight: 600;
	  color: #101d37;
	}
	.title .more{
	  font-size: 12px;
	  color: #ccc;
	  display: -webkit-box;
	  display: -webkit-flex;
	  display: flex;
	}
		.line {
			display: bock;
			width: 100%;
			height: 1rpx;
			margin-top: 22rpx;
			background: #e8e8e8;
		}
		&:last-child {
			.line {
				//display: none;
			}
			//padding-bottom: 30rpx;
		}
	
}
</style>
